<script setup>
  import { useData } from "vitepress";

  const { site } = useData();
  const navItems = site.value.themeConfig.nav;
  console.log("aaaaaaaaaaaaaaaaaaaaaaaa");
</script>

<template>
  <span> =====================</span>
  <nav class="custom-nav">
    <a href="/" class="logo">
      <font-awesome-icon icon="home" />
      <span style="margin-left: 4px">MySite</span>
    </a>
    <div class="nav-items">
      <a
        v-for="item in navItems"
        :key="item.text"
        :href="item.link"
        class="nav-item"
      >
        <font-awesome-icon
          v-if="item.icon"
          :icon="item.icon"
          style="margin-right: 4px"
        />
        {{ item.text }}
      </a>
    </div>
  </nav>
</template>

<style>
  .custom-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 4rem;
  }
  .nav-items {
    display: flex;
    gap: 1rem;
  }
  .nav-item {
    color: var(--vp-c-text-2);
    text-decoration: none;
    white-space: nowrap;
  }
  .nav-item:hover {
    color: var(--vp-c-brand);
  }
  .logo {
    color: var(--vp-c-text-1);
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
  }
</style>
